import GridBase from '@/components/TableGrid/gridBase'
import {formatDate} from '@/common/formatter'
// import drawEditor from '@/components/kityDraw/drawEditor'

import { fetchList, delDrawInfo } from '@/api/draw/DrawInfoApi'
import DrawInfoEdit from './DrawInfoEdit.vue'
import DrawInfoView from './DrawInfoView.vue'

export default {
  extends: GridBase, // 分页列表组件
  name: 'drawInfoList',
  components: {
    DrawInfoEdit,
    DrawInfoView,
    // drawEditor
  },
  data() {
    return {
      rowKey: 'id', // 主键
      // columns: [].concat(this.getOpColumsCustom()).concat(this.getTableColumns()),
      columns: [].concat(this.getTableColumns()),
      viewFormId: "viewForm", // 查看页面ID
      editFormId: "editForm", // 编辑页面ID
      domainName: '画布信息', // 域名称,例如用户列表，域名称为用户
      selectedName: '', // 选中的名称
      curId: '', // 选中的Id
      drawListVisible: false,// 是否显示导图编辑

      // 当前栏目标配置
      columnId:'',
      columnName:'',

    }
  },
  created () {
    this.getParams()
  },
  watch: {
    '$route': 'getParams'
  },
  mounted() {
    this.getParams()
  },
  methods: {
    getDataList(params) { // 列表查询
      if(!params){
        params = {};
      }
      if(!this.columnId){

        return;
      }
      params.columnId = this.columnId;
      params.name = this.queryParam.name;
      return fetchList(params);
    },
    deleteByKey(params) { // 删除函数
      return delDrawInfo(params);
    },
    initForMounted() { // mount时触发
      this.getParams ();
    },
    getParams () {
      if(!this.$route.query.columnId){
        this.$message({
          type: 'info',
          message: '请选择一个栏目'
        });
      }
      if(this.columnId === this.$route.query.columnId){
        return;
      }
      this.columnId = this.$route.query.columnId
      this.columnName = this.$route.query.columnName
       // 如果是params 传参，那就是this.$route.params.site
       this.handleSearch();
   },

   // 列配置
    getTableColumns(){
      let cols =  [
        { type: 'selection' }, // 复选框
        {
          label: '标题',
          prop: 'name',
          renderBody:   (h, row) =>
            <div >
                <span onClick={() => this.toDrawEdit(row)} style="color: #409eff;cursor: pointer;">{row.name}</span>
            </div>,
        },
        {
          label: '栏目',
          prop: 'columnName',
          width: 150
        },
        {
          label: '排序',
          prop: 'sortNo',
          width: 100
        },
        {
          label: '更新时间',
          prop: 'updateTime',
          width: 180,
          formatter(val) {
            return formatDate(val);
          }
        },
      ];

      return cols;

    },
    getOpColumsCustom(){ // 列表操作按钮
      return {
        label: '操作',
        prop: 'title',
        width: 100,
        renderBody:   (h, row) =>
        <div style="padding:0px;margin:0px;" align="center">
          <el-button type="primary" icon="el-icon-share" size="mini"
                    onClick={() => this.toDrawEdit(row)}>编辑</el-button>
        </div>
      }
    },

    // 画布 跳转begin
    toDrawEdit(row){
      this.selectedName = row.title
      this.curId = row.id;
      this.$router.push({
        path: '/knowtree/draw-edit',
        query: {
          id: this.curId,
          name: this.selectedName
        },
      });
    },
    toDrawListBySelected() {
      if(this.selectionRows.length>1){
        this.$message({  message: '只能选择一个导图!', type: 'warning'})
        return;
      }
      if(this.selectionRows.length<1){
        this.$message({  message: '请选择需要管理的导图!', type: 'warning'})
        return;
      }
      const row = this.selectionRows[0];
      this.toDrawEdit(row);
    },
    // 画布跳转end
  }
}
